<div class="notifications-container">
  {{#each this.flashMessages.queue as |flash|}}
    <FlashMessage
      data-test-flash-notification
      data-test-flash-notification-type={{flash.type}}
      @flash={{flash}}
      class="notification"
      as |component flash close|
    >
      <Hds::Toast
        @color={{flash.type}}
        @icon={{flash.icon}}
        @onDismiss={{close}}
        as |T|
      >
        <T.Title data-test-flash-notification-title>
          {{flash.title}}
        </T.Title>
        <T.Description data-test-flash-notification-description>
          {{flash.message}}
        </T.Description>
        {{#if (and flash.buttonText flash.buttonAction)}}
          <T.Button
            data-test-flash-notification-button
            @text={{flash.buttonText}}
            @icon={{flash.buttonIcon}}
            {{on "click" flash.buttonAction}}
          />
        {{/if}}
      </Hds::Toast>
    </FlashMessage>
  {{/each}}
</div>
